<template>
    <view class="container">
        <!-- 状态栏占位 -->
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
        
        <!-- 收藏列表 -->
        <scroll-view class="collect-list">
            <view class="product-card" v-for="(product, index) in collectList" :key="product.id || index"
                @click="goToProductDetail(product)">
                <image class="product-image" :src="product.img || public_img + '/img/default_goods.png'" mode="aspectFill"></image>
                <view class="product-info">
                    <view class="product-title">{{ product.title || "商品名称" }}</view>
                    <view class="product-synopsis">{{ product.synopsis || product.title || "商品描述" }}</view>
                    <view class="product-price">¥{{ product.price || 0 }}</view>
                </view>
            </view>

            <!-- 无收藏提示 -->
            <view v-if="collectList.length === 0 && !loading" class="no-products">
                <text>暂无收藏商品</text>
            </view>

            <!-- 为您推荐 -->
            <view class="recommend-section" v-if="collectList.length > 0 || !loading">
                <view class="recommend-divider">
                    <view class="divider-line"></view>
                    <text class="divider-text">为您推荐</text>
                    <view class="divider-line"></view>
                </view>

                <!-- 瀑布流商品列表 -->
                <view class="waterfall-container">
                    <view class="waterfall-column" v-for="(column, colIndex) in waterfallColumns" :key="colIndex">
                        <view class="product-item-waterfall" v-for="(item, index) in column" :key="index"
                            @click="goToRecommendProductDetail(item)">
                            <image :src="item.img" mode="widthFix"></image>
                            <view class="product-info-waterfall">
                                <view class="product-title">{{ item.title }}</view>
                                <view class="product-synopsis">{{ item.synopsis }}</view>
                                <view class="product-price">
                                    <text class="price">¥{{ item.price }}</text>
                                    <text class="original-price" v-if="item.original_price">¥{{ item.original_price }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 无数据提示 -->
                <view v-if="!recommendList.length && !recommendLoading" class="no-data">
                    <text>暂无推荐商品</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { public_img } from '@/static/public.js';
import { productApi, homeApi } from '@/api/indexAPI.js';

export default {
    data() {
        return {
            public_img: public_img,
            statusBarHeight: 0,
            collectList: [],
            loading: false,
            // 推荐商品列表数据
            recommendList: [],
            // 瀑布流列数
            waterfallColumnCount: 2,
            // 瀑布流列数据
            waterfallColumns: [[], []],
            recommendLoading: false
        }
    },
    onLoad() {
        // 获取状态栏高度
        this.getStatusBarHeight();
        // 加载收藏列表
        this.loadCollectList();
        // 加载推荐商品列表
        this.loadRecommendList();
    },
    methods: {
        // 获取状态栏高度
        getStatusBarHeight() {
            try {
                const systemInfo = uni.getSystemInfoSync();
                this.statusBarHeight = systemInfo.statusBarHeight || 0;
            } catch (err) {
                console.error('获取状态栏高度失败', err);
                this.statusBarHeight = 20;
            }
        },
        // 加载收藏列表
        async loadCollectList() {
            this.loading = true;
            try {
                const response = await productApi.getCollectList();
                if (response && (response.code === 1 || response.code === 200) && response.data) {
                    if (response.data.list && Array.isArray(response.data.list)) {
                        // 处理图片路径
                        this.collectList = response.data.list.map(item => ({
                            ...item,
                            img: item.img && item.img.startsWith('http') ? item.img : (public_img + (item.img || '/img/default_goods.png'))
                        }));
                    } else {
                        this.collectList = [];
                    }
                } else {
                    console.error('获取收藏列表失败:', response);
                    this.collectList = [];
                }
            } catch (error) {
                console.error('获取收藏列表出错:', error);
                this.collectList = [];
            } finally {
                this.loading = false;
            }
        },
        // 跳转到商品详情
        goToProductDetail(product) {
            uni.navigateTo({
                url: `/pages/product/index?id=${product.id}`
            });
        },
        // 加载推荐商品列表
        async loadRecommendList() {
            this.recommendLoading = true;
            try {
                const res = await homeApi.getHomeData();
                if (res && res.code === 1 && res.data) {
                    // 设置商品列表数据
                    if (res.data.list && Array.isArray(res.data.list) && res.data.list.length > 0) {
                        this.recommendList = res.data.list.map(item => ({
                            ...item,
                            img: item.img && item.img.startsWith('http') ? item.img : (public_img + (item.img || ''))
                        }));
                        // 构建瀑布流数据
                        this.buildWaterfallData();
                    } else {
                        // 如果没有商品数据，设置为空数组
                        this.recommendList = [];
                        this.waterfallColumns = [[], []];
                    }
                } else {
                    console.error('获取推荐商品失败:', res);
                    this.recommendList = [];
                    this.waterfallColumns = [[], []];
                }
            } catch (error) {
                console.error('获取推荐商品出错:', error);
                this.recommendList = [];
                this.waterfallColumns = [[], []];
            } finally {
                this.recommendLoading = false;
            }
        },
        // 构建瀑布流数据
        buildWaterfallData() {
            // 初始化列数组
            const columns = Array.from({ length: this.waterfallColumnCount }, () => []);

            // 将商品列表按顺序分配到各列
            this.recommendList.forEach((item, index) => {
                const columnIndex = index % this.waterfallColumnCount;
                columns[columnIndex].push(item);
            });

            // 更新瀑布流列数据
            this.waterfallColumns = columns;
        },
        // 跳转到推荐商品详情
        goToRecommendProductDetail(item) {
            uni.navigateTo({
                url: `/pages/product/index?id=${item.id}`
            });
        }
    }
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
}

/* 状态栏占位 */
.status-bar {
    width: 100%;
    background-color: #ffffff;
}

/* 收藏列表 */
.collect-list {
    flex: 1;
    box-sizing: border-box;
}

.product-card {
    border-radius: 5px;
    display: flex;
    padding: 10px 0 10px 8px;
    background-color: white;
    margin: 6px 0;
}

.product-card:last-child {
    border-bottom: none;
}

.product-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-title {
    font-size: 16px;
    color: #505050;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: 8rpx;
}

.product-synopsis {
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 10rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 90%;
}

.product-price {
    font-size: 16px;
    color: #ff0000;
    margin-top: auto;
}

/* 无收藏提示 */
.no-products {
    width: 100%;
    padding: 100rpx 0;
    text-align: center;
    color: #999999;
    font-size: 28rpx;
}

/* 为您推荐部分 */
.recommend-section {
    margin-top: 40rpx;
}

.recommend-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
}

.divider-line {
    width: 60px;
    height: 0.5px;
    background-color: #646464;
}

.divider-text {
    font-weight: 350;
    margin: 0 20rpx;
    font-size: 28rpx;
    color: #646464;
}

/* 瀑布流容器 */
.waterfall-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10rpx 10rpx;
}

.waterfall-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-right: 15rpx;
}

.waterfall-column:last-child {
    margin-right: 0;
}

.product-item-waterfall {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 7px;
    padding: 5px;
}

.product-item-waterfall image {
    width: 100%;
    border-radius: 5.5px;
}

.product-info-waterfall {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-info-waterfall .product-title {
    font-size: 14px;
    color: #505050;
    margin-bottom: 3px;
}

.product-info-waterfall .product-synopsis {
    font-size: 13px;
    color: #8b8b8c;
    margin-bottom: 10px;
    flex: 1;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-info-waterfall .product-price {
    display: flex;
    align-items: center;
}

.price {
    font-size: 14px;
    color: #ff4757;
    margin-right: 10rpx;
}

.original-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
}

/* 无数据提示 */
.no-data {
    text-align: center;
    padding: 40rpx 0;
    color: #999;
    font-size: 28rpx;
}
</style>
